<!--
 * @Author: C.
 * @Date: 2021-06-17 09:29:18
 * @LastEditTime: 2021-06-18 10:03:14
 * @Description: file content
-->
<template>
  <el-tooltip class="item"
              effect="dark"
              content="已超期"
              :disabled="!isTimeOut"
              placement="top-start">
    <div :class="isTimeOut?'time-out':''">
      {{plan|DateFilter}}
    </div>
  </el-tooltip>
</template>

<script>
export default {
  data () {
    return {
      dd: ''
    }
  },
  methods: {
  },
  computed: {
    isTimeOut () {
      return (new Date(this.plan).getTime()) >= (new Date().getTime())
    }
  },
  props: {
    plan: {
      type: String,
      default: new Date()
    }
  }
}
</script>

<style lang="scss">
@import "../../styles/mixin.scss";
.time-out {
  @include flexBox;
  // background-color: red;
  // color: #fff;
  border: 1px solid #f56c6c;
  border-radius: 10px;
}
.time-out:hover {
  // background-color: pink;
}
</style>
